<template>
  <div class="swipe">
    <mt-swipe :auto="4000" @change="handleChange">
      <mt-swipe-item><img class="swipe-img" src="../assets/images/tool/11.jpg"></mt-swipe-item>
      <mt-swipe-item><img class="swipe-img" src="../assets/images/tool/22.jpg"></mt-swipe-item>
      <mt-swipe-item><img class="swipe-img" src="../assets/images/tool/33.jpg"></mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  data: function() {
    return {};
  },
  props: {},
  methods: {
    handleChange(index) {
      // console.log(index)
    }
  }
};
</script>

<style scoped>
.mint-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}
.mint-swipe-item {
  line-height: 200px;
  background-size: 100%, 100%;
}
.swipe {
  width: 100%;
}

.swipe-img {
  width: 100%;
  height: 100%;
}
</style>

